import { useState, useEffect, useContext } from 'react'
import PanelLeft from '../../../../../common/PanelLeft';
import './index.less';
import HuodianDetail from './HuodianDetail';
import Example from '../example';
import { resourcePath } from '../../../../../../utils/resource'
import Gklwt from './Gklwt';
import Lqkkjc from './Lqkkjc';
import GkDetail from './GkDetail';
import LqDetail from './LqDetail';
import useBusinessMap from '../../../../../common/BusinessMap/useBusinessMap';
import { Icon, Style } from 'ol/style';
import { clearHighlight, createLayer, dataToFeature } from '../../../../../../utils/helper/mapHelper';
import JcyjApi from '../../../../../../utils/apis/JcyjApi';
import yqPng from './images/yq.png'
import { Layer } from 'ol/layer';
import Yujinmsg from '../Yujinmsg';
import Xq from '../Fxjc/Xq';
import DzenXqDetail from '../Fxjc/DzenXqDetail';
import { feature } from 'caniuse-lite';
import jcyjContext from '../jcyjContext';
import Rcx from './Rcx';
import RcxDetail from './RcxDetail';
import FetchHelper from '../../../../../../utils/helper/fetch-helper';

export default function Sljc(props) {
    const [rightVisible, setRightVisible] = useState(true);
    const map = useBusinessMap();
    // clearHighlight(map);
    const [gkDetailItem, setGkDetailItem] = useState();
    const [lqDetailItem, setLqDetailItem] = useState();
    const [rcxDetailItem, setRcxDetailItem] = useState();

    const { jcdListDates ,setJyl} = useContext(jcyjContext)
    //console.log('jcdListDates',jcdListDates)
    const [layers, setLayers] = useState();

    //用于详情数据更新
    const [datas3, setDatas3] = useState();
    const [datas2, setDatas2] = useState();
    const [datas1, setDatas1] = useState();
    function datagx(a) {
        setDatas1(a);

    }
    useEffect(() => {
        setJyl([{
            name: '翠屏区', value: '0',
        }, {
            name: '南溪区', value: '0',
        }, {
            name: '叙州区', value: '0',
        }, {
            name: '江安县', value: '0',
        }, {
            name: '长宁县', value: '0',
        }, {
            name: '高县', value: '0',
        }, {
            name: '珙县', value: '0',
        }, {
            name: '筠连县', value: '0',
        }, {
            name: '兴文县', value: '0',
        }, {
            name: '屏山县', value: '0',
        }, {

        }])
    }, [setJyl])
    useEffect(() => {
        setXlName(null)
    }, [gkDetailItem, lqDetailItem])
    const [xlName, setXlName] = useState();
    useEffect(() => {
        if (map) {
            const handler = evt => {
                
                const features = map.getFeaturesAtPixel(evt.pixel);
                const item = features?.find(feature => feature.get('jcdlx'))?.getProperties();
                const item2 = features?.find(feature => feature.get('name'))?.getProperties();
                console.log('1',feature,'2',item,'3',item2)
                if (item) {
                    console.log('5',item)
                    setGkDetailItem(null);
                    setLqDetailItem(null);
                    setRcxDetailItem(null)
                    switch (item?.jcdlx) {
                        case '高空瞭望塔':
                            setGkDetailItem(item)
                            break;
                        case '林区卡口':
                            setLqDetailItem(item);
                            break;
                        default:
                    }
                }
                if (item2) {
                    console.log('4',item2)
                    setGkDetailItem(null);
                    setLqDetailItem(null);
                    setRcxDetailItem(null)
                    switch (item2?.name) {
                        case '热成像云台':
                            setRcxDetailItem(item2)
                            break;
                        default:
                    }
                }

            }
            map.on('singleclick', handler);

            return () => {
                map.un('singleclick', handler);
            }
        }
    }, [map])
    useEffect(() => {
        if (map) {
            let gkLayer, lqLayer;
            const features = jcdListDates?.rows?.filter(row => {
                return row.geom
            })?.map(item => {
                return dataToFeature(item)
            })

            gkLayer = createLayer((feature) => {
                const jcdlx = feature.get('jcdlx');
                // console.log('geom',feature.get('geom'))
                if (jcdlx === '高空瞭望塔') {
                    const jjx = feature.get('jcjjx')
                    const iconPath = jjx > 300 ? (resourcePath.mapIcons.gk_red) : (jjx > 200 ? (resourcePath.mapIcons.gk_org) : (jjx > 100 ? resourcePath.mapIcons.gk_yellow : resourcePath.mapIcons.gk_blue))
                    return new Style({
                        image: new Icon({
                            src: iconPath,
                            scale: 0.7,
                            anchor: [0.5, 1]
                            // size: [60, 98],
                            // scale: 1 / 24
                        })
                    })

                }
            }, features?.filter(feature => feature.get('jcdlx') === '高空瞭望塔') || []);
            gkLayer.set('type', 'gk')
            gkLayer.set('layerName', 'icon-layer');
            lqLayer = createLayer((feature) => {
                const jcdlx = feature.get('jcdlx');
                if (jcdlx === '林区卡口') {
                    const jjx = feature.get('jcjjx')
                    const iconPath = jjx > 300 ? (resourcePath.mapIcons.lqka_red) : (jjx > 200 ? (resourcePath.mapIcons.lqka_org) : (jjx > 100 ? resourcePath.mapIcons.lqka_yellow : resourcePath.mapIcons.lqka_blue))
                    // console.log('jjx', jjx)
                    return new Style({
                        image: new Icon({
                            src: iconPath,
                            scale: 0.7,
                            anchor: [0.5, 1]
                            // size: [60, 98],
                            // scale: 1 / 24
                        })
                    })
                }

            }, features?.filter(feature => feature.get('jcdlx') === '林区卡口'));
            lqLayer.set('type', 'lq')
            lqLayer.set('layerName', 'icon-layer');
            map.addLayer(gkLayer)
            map.addLayer(lqLayer)
            setLayers([gkLayer, lqLayer])
            return () => {
                map.removeLayer(gkLayer)
                map.removeLayer(lqLayer)
            }
        }
    }, [map, jcdListDates])
    useEffect(() => {

        if (map) {
            let rcxLayer
            let features 
            FetchHelper.getJson(`/admin-api/ybyj/sp/list`, { name: '热成像云台' }).then(resp => {
                
                features = resp?.rows?.filter(row => {
                   
                    if(row.longitude&&row.latitude){
                    return row.geom=`POINT(${row.longitude} ${row.latitude})`
                }
                return null;
                })?.map(item => {
                    
                    return dataToFeature(item)
                })
                rcxLayer = createLayer((feature) => {
                    const name = feature.get('name');
                    // console.log('geom',feature.get('geom'))
                    if (name === '热成像云台') {
                        return new Style({
                            image: new Icon({
                                src: resourcePath.iconMap['热成像云台'],
                                scale: 0.7,
                                anchor: [0.5, 1],
                                //size: [60, 98],
                                // scale: 1 / 24
                            })
                        })
    
                    }
                }, features?.filter(feature => feature.get('name') === '热成像云台') || []);
                rcxLayer.set('type', 'rcx')
                rcxLayer.set('layerName', 'icon-layer');
                map.addLayer(rcxLayer)
                setLayers([rcxLayer])
            });
            return () => {
                map.removeLayer(rcxLayer)
            }
        }
    }, [map])

    return <>
        <PanelLeft>
            <div className='sljc-root' style={{
                width: 350,
                position: "absolute",
                left: 30,
                top: 30,
                bottom: 30,
                background: 'rgba(1,15,31,0.5)',
                // border: '1px solid rgba(9,107,225,0.8)',
                pointerEvents: 'auto',
                overflow: "auto",
                borderRadius: 8
            }}>
                <Gklwt onDetail={
                    item => {
                        setRcxDetailItem(null);
                        setLqDetailItem(null);
                        setGkDetailItem(item);
                    }
                } />
                <Lqkkjc onDetail={
                    item => {
                        setRcxDetailItem(null);
                        setGkDetailItem(null);
                        setLqDetailItem(item);
                    }
                } />
                <Rcx onDetail={
                    item => {
                        setLqDetailItem(null);
                        setGkDetailItem(null);
                        setRcxDetailItem(item);
                    }
                } />
            </div>
        </PanelLeft>


        <Example datas={[
            {
                name: '预警信息',
                type: 'hongs',
                iconPath: resourcePath.mapIcons.yjxx_red,

            },
            {
                name: '高空瞭望塔',
                iconPath: resourcePath.mapIcons.gk_blue,
                type: 'gk'
            },
            {
                name: '林区卡口',
                iconPath: resourcePath.mapIcons.lqka_blue,
                type: 'lq'
            },
            {
                name: '遥感火点',
                iconPath: resourcePath.mapIcons.yghd_blue,
                type: 'yghd'
            }


        ]} onVisibleChange={(checked, value) => {
            const yjLayer = map.getLayers().getArray().find(l => l.get('type') === 'hongs');
            [yjLayer, ...layers].find(layer => layer.get('type') === value)?.set('visible', checked)
        }} />
        <div style={{ display: !datas1 ? 'flex' : 'none' }}>
            {gkDetailItem && <GkDetail item={gkDetailItem} onClose={e => {
                setGkDetailItem(null);
                // clearHighlight(map)
            }} setDatas1={datagx} setDatas2={setDatas2} setDatas3={setDatas3} />}
            {lqDetailItem && <LqDetail item={lqDetailItem} onClose={e => {
                setLqDetailItem(null);
                // clearHighlight(map)
            }} setDatas1={datagx} setDatas2={setDatas2} setDatas3={setDatas3} />}
            {rcxDetailItem && <RcxDetail item={rcxDetailItem} onClose={e => {
                setRcxDetailItem(null);
                // clearHighlight(map)
            }} setDatas1={datagx} setDatas2={setDatas2} setDatas3={setDatas3} />}
        </div>
        <div style={{
            display: xlName ? 'none' : 'block'
        }}>
            {datas1 && <Xq datas1={datas1} datas2={datas2} datas3={datas3} onClose={e => { setDatas1(null) }} onName={setXlName}></Xq>}
        </div>

        {/* {!gkDetailItem && !lqDetailItem && <Yujinmsg />} */}
        {
            xlName && <DzenXqDetail xlName={xlName} datas1={datas1} onClose={() => setXlName(null)} />
        }

    </>
}